<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>讨论区首页</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/ChatIndex.css">
<link rel="stylesheet" type="text/css" href="js/showGameChatpost.css">
<link rel="stylesheet" type="text/css" href="js/laypage.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){	

	$("#joinMyChat").click(function(){
		location.href="html/lhtml/UserChat.jsp";
	})
		
	$("#showAllGameClass").toggle(//展示所有游戏分类的点击事件
			
		function(){
		//alert("11");
		$.ajax({
			url:'showGameClass',
			type:'post',
			dataType:'json',
			success:function(result){
				$("#showGameClass").html("");
				$.each(result,function(ind,exe){					
					$("#showGameClass").append("<button class='gameClassId' value="+exe.gcId+">"+exe.gcName+"</button> &nbsp;&nbsp;&nbsp;");									 
				});					 
			}
		})
	},
	function(){
		$("#showGameClass").html("");
		$("#showGame").html("");
		$("#zhushi1").html("<p id='zhushi1'>点击所有分类通过分类寻找游戏，也可直接在搜索框中搜索，也可通过快速连接进入热门，搜索时可选择搜索游戏，也可搜索帖子</p>");
	});
	
	
	$("#showGameAndClass").delegate("button.gameClassId","click",function(){//delegate是js的时间代理或委托
		//alert("111");
		var gcId=$(this).val();
		/* alert(gcId); */
		$.ajax({
			url:'showGame',
			type:'post',
			dataType:'json',
			data:{gcId:gcId},
			success:function(result){
				$("#showGame").html("");
				$("#zhushi1").html("");
				$.each(result,function(ind,exe){
					$("#showGame").append("<li type='none' style='width:25%;float:left;margin-top:5px' align='center'><a href='showGameChat?gid="+exe.gameId+"'>"+exe.gameName+"</a></li>");
				})
			}
		})
		
	});  
	//=========================================================
		
	 $("#showMyLove").toggle(  //展示用户关注的游戏
	   function(){
		   /* alert("11"); */
		   $.ajax({
			   url:'getLoveGame.do',
			   type:'post',
			   dataType:'json',
			   success:function(result){
				   $("#showGameClass").html("");
				   $("#zhushi1").html("");
				   $.each(result,function(ind,ele){
					   $("#showGameClass").append("<li type='none' style='width:25%;float:left;margin-top:5px' align='center'><a href='showGameChat?gid="+ele.gameId+"'>"+ele.gameName+"</a></li>");  
				   })				  
			   }
		   })
	   },
	   function(){			
			$("#showGame").html("");
			 $("#showGameClass").html("");
			$("#zhushi1").html("<p id='zhushi1'>点击所有分类通过分类寻找游戏，也可直接在搜索框中搜索，也可通过快速连接进入热门，搜索时可选择搜索游戏，也可搜索帖子</p>");
		}
	)  
		
	 
	showC(1);//展示信息及分页
	
	$("#gameButton").click(function(){   //搜索游戏
		var gameName=$("#searchGame").val();
		//alert(gameName);//获取搜索框中的值，进行搜索。
		location.href="showGameChatBySearch?gameName="+gameName;
	})
	
	$("#chatButton").click(function(){       //搜索帖子标题
		
	
		sea(1);
		
	})
});

//============================

</script>
</head>
<body>
   
  <div id="body01">
  <nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>
    <div id="bodyHead">
        <button id="showAllGameClass" class="btn btn-default">所有分类</button>
        <c:if test="${sessionScope.user.uid !=null}">
        <button id="showMyLove" class="btn btn-default">我的关注</button>
        <button id="joinMyChat" class="btn btn-default">我的讨论</button>
        </c:if>
        热门搜索：<a href="showGameChat?gid=2">英雄联盟</a><a href="showGameChat?gid=6">绝地求生</a><a href="showGameChat?gid=1">王者荣耀</a>
        <a href="showGameChat?gid=1">贪玩蓝月</a><a href="showGameChat?gid=1">炉石传说</a>
     <input type="text" id="searchGame"><button class="btn btn-default" id="gameButton">搜索游戏</button><button class="btn btn-default" id="chatButton">搜索帖子</button>
    
    </div>
    <div id="showGameAndClass" style="width:310px;background-color:#63B8FF;height:800px;float:left; margin-left:20px;margin-top:30px">
           <h1 style="font-size:16px;" align="center" id="h1h1">欢迎来到讨论区首页！</h1>
         <div id="showGameClass"></div>
         <div id="showGame"></div><br>
        <p id="zhushi1">点击所有分类通过分类寻找游戏，也可直接在搜索框中搜索，也可通过快速连接进入热门，搜索时可选择搜索游戏，也可搜索帖子</p>
    </div>
     <div id="chatIndex" style="margin-top:30px;border:solid 1px red;float:left;width:700px;margin-left:30px">
    <div  id="chshow">
    
    <!-- <table style='width:100%'>
    <tr><td>发帖人</td><td>标题</td><td></td></tr>
    <tr><td>内容</td><td></td><td></td></tr>
    <tr><td>游戏</td><td></td><td>时间</td></tr>
    </table> -->
    
    </div>
    
     <div id="page"></div>
     <script type="text/javascript" src="js/laypage.js"></script>
    <script type="text/javascript">
    var sea=function(currentPage){
    	var postTitle=$("#searchGame").val();
		$.ajax({
			url:'showAllChat',
			type:'post',
			data:{'postTitle':postTitle,'currentPage':currentPage},
			dataType:'json',
			success:function(result){
				$("#chshow").html("");
				$.each(result.chatList,function(ind,exe){
					//alert(exe.postContent);
					$("#chshow").append("<div class='list-group' >"+
							  "<div class='list-group-item' style='height:100px;'>"+
							    "<h4 class='list-group-item-heading'><a href='chatContent?postId="+exe.postId+"&postTitle="+exe.postTitle+"&postContent="+exe.postContent+"&gameName="+exe.game.gameName+"&gameId="+exe.game.gameId+"&uname="+exe.user.uname+"&photo="+exe.user.photo+"&postPicture="+exe.postPicture+"'>"+exe.postTitle+"</a></h4>"+
							    "<p class='list-group-item-text'style='height:38px;overflow:hidden;text-overflow:ellipsis;'>"+exe.postContent+"</p>"+
							    "<span>"+exe.game.gameName+"</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>发帖人："+exe.user.uname+"</span>"+
							 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>发帖时间："+exe.postTime+"</span></div>"+
							"<p></p>"+
							"</div> ")
				})
				
				laypage({
    			cont:$("#page"),
    			pages:result.pages, 
    			curr:currentPage,
    		    groups:3,
    		   /*  skin:'molv', */
				skip:true,
				jump:function(obj,first){
					if(!first){
						sea(obj.curr);
					}
				}
    		})
			}
		})
	}
    
    
    
    var showC=function(currentPage){
    	$.ajax({  //展示所有的帖子
    		url:'showAllChat',
    		type:'post',
    		data:{currentPage:currentPage},
    		dataType:'json',
    		success:function(result){
    			//alert("测试");
    				$("#chshow").html("");
    			$.each(result.chatList,function(ind,exe){	
    				/* alert(exe.postPicture); */
    			$("#chshow").append("<div class='list-group' >"+
    					  "<div class='list-group-item' style='height:100px;'>"+
    		    "<h4 class='list-group-item-heading'><a href='chatContent?postId="+exe.postId+"&postTitle="+exe.postTitle+"&postContent="+exe.postContent+"&gameName="+exe.game.gameName+"&gameId="+exe.game.gameId+"&uname="+exe.user.uname+"&photo="+exe.user.photo+"&postPicture="+exe.postPicture+"'>"+exe.postTitle+"</a></h4>"+
    		    "<p class='list-group-item-text'style='height:38px;overflow:hidden;text-overflow:ellipsis;'>"+exe.postContent+"</p>"+
    		    "<span>"+exe.game.gameName+"</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>发帖人："+exe.user.uname+"</span>"+
    		 "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>发帖时间："+exe.postTime+"</span></div>"+
    		"<p></p>"+
    		"</div> ")
    			})
    		
    		laypage({
    			cont:$("#page"),
    			pages:result.pages, 
    			curr:currentPage,
    		    groups:3,
    		   /*  skin:'molv', */
				skip:true,
				jump:function(obj,first){
					if(!first){
						showC(obj.curr);
					}
				}
    		})
    			
    		}
    	});
    }
    
    </script>
    </div>
    
  </div>
</body>
</html>